<template>
  <div class="login">
    <div class="block">
      <el-form :hide-required-asterisk="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!-- <div class="tab">
          <div>
            <span>登录</span>
            <span>注册</span>
          </div>
          <i></i>
        </div> -->
        <el-form-item label="用户名" prop="account">
          <el-input placeholder=""  v-model.trim="ruleForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" placeholder="" v-model.trim="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="register">注册</el-button>
        </el-form-item>
      </el-form>
      <!-- <button type="submit" class="btn btn-default" @click="login">Sign In</button> -->
      <!-- <button type="submit" class="btn btn-default" @click="register">Register</button> -->
      <!-- <button type="submit" class="btn btn-default" @click="getAllAccount">Get all accounts</button> -->
    </div>
  </div>
</template>

<script>
import cookie from 'cookiejs'
import {login, register} from '@/api/api'
export default {
  data () {
    return {
      ruleForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    login () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let params = {
            account: this.ruleForm.account,
            password: this.ruleForm.password
          }
          // this.$http.post('/api/user/login', params)
          login(params)
            .then((res) => {
              console.log(res, 11111111111111)
              var msg = res.msg
              msg = (res.data ? res.data.account : '') + ' ' + msg
              // alert(msg)
              if (res.code) {
                this.$message.success(msg)
                cookie.set('zp_token', res.token)
                this.$store.dispatch('getUserInfo', res.data)
                localStorage.setItem('account', this.ruleForm.account)
                this.$router.replace('/list')
              } else {
                this.$message.error(msg)
                console.log(res.msg)
              }
            })
            .catch((reject) => {
              // console.log(reject, 222222222)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    register () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let params = {
            account: this.ruleForm.account,
            password: this.ruleForm.password
          }
          register(params)
            .then((res) => {
              console.log(res)
              var msg = res.msg
              // alert(msg)
              if (res.code) {
                msg = this.ruleForm.account + ' ' + msg
                this.$message.success(msg)
                cookie.set('zp_token', res.token)
                localStorage.setItem('account', this.ruleForm.account)
                this.$router.replace('/list')
              } else {
                this.$message.error(msg)
              }
            })
            .catch((reject) => {
              console.log(reject)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getAllAccount () {
      console.log('call getAllAccount')
      this.$http.post('/api/user/all')
        .then((response) => {
          console.log(response)
        })
        .catch((reject) => {
          console.log(reject)
        })
    }
  }
}
</script>
<style lang="less" scoped>
.login{
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  // background: url('../../static/1.jpg') center no-repeat;
  background: rgb(5, 0, 1);
  .block{
    position: absolute;
    // background: url('../../static/3.jpg') center no-repeat;
    top: 20%;
    right: 100px;
    background: #fff;
    padding: 30px 46px 30px 0;
    border-radius: 6px;
    /deep/ .el-form{
      .el-button{
        width: 100px;
      }
      .el-form-item__label{
        // color: #fff;
      }
      .tab{
        padding-left: 46px;
        position: relative;
        height: 40px;
        >div{
          background: rgba(250, 192, 2, 0.664);
          display: flex;
          span{
            color: #fff;
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 2;
            line-height: 40px;
            cursor: pointer;
          }
        }
        i{
          position: absolute;
          top: 5px;
          left: 64px;
          width: 90px;
          height: 30px;
          border-radius: 20px;
          background: rgba(249, 253, 0, 0.747);
        }
      }
    }
  }
}
</style>
